<template>
  <div class="p-lr-15" v-if="show">
    <a-form :labelCol="{ span: 4 }" :wrapperCol="{ span: 20 }">
      <div v-if="data.type === 'table'">
        <TableSetting
          :dataAfferent="data"
          :formData="formData"
          :tableFiledData="tableFiledData"
          @changeTable="selectFiled"
        ></TableSetting>
      </div>
      <div v-else>
        <a-form-item required label="绑定字段" v-if="data.type != 'grid'">
          <a-select
            @change="selectFiled"
            v-model:value="data.field"
            style="width: 200px"
          >
            <a-select-option
              v-for="(item, index) in tableFiledData"
              :key="index"
              :value="item.columnName"
            >
              {{ item.columnName }}
            </a-select-option>
          </a-select>
        </a-form-item>

        <a-form-item
          label="标题"
          placeholder="请输入"
          v-if="data.type != 'grid'"
        >
          <a-input v-model:value="data.name"></a-input>
        </a-form-item>
        <a-form-item
          label="占位内容"
          v-if="
            data.type != 'date' &&
            Object.keys(data.options).indexOf('placeholder') >= 0
          "
        >
          <a-input
            placeholder="请输入"
            v-model:value="data.options.placeholder"
          ></a-input>
        </a-form-item>

        <a-form-item label="输入框类型" v-if="data.type == 'input'">
          <a-select v-model:value="data.options.type">
            <a-select-option value="input">输入框</a-select-option>
            <a-select-option value="password">密码框</a-select-option>
            <a-select-option value="textarea">长文本框</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item
          class="mb-1"
          label="默认值"
          v-if="
            Object.keys(data.options).indexOf('defaultValue') >= 0 &&
            data.type !== 'radio' &&
            data.type !== 'checkbox'
          "
        >
          <a-input
            v-if="
              data.type == 'text' ||
              data.type == 'input' ||
              data.type == 'select'
            "
            placeholder="请输入默认值"
            v-model:value="data.options.defaultValue"
          ></a-input>
          <a-input-number
            v-else-if="data.type == 'number'"
            v-model:value="data.options.defaultValue"
            placeholder="请输入"
          ></a-input-number>
          <a-textarea
            v-else-if="data.type == 'textarea'"
            :rows="5"
            v-model:value="data.options.defaultValue"
          ></a-textarea>
          <a-rate
            v-else-if="data.type == 'rate'"
            :allow-half="data.options.allowHalf"
            v-model:value="data.options.defaultValue"
          ></a-rate>
          <div v-else-if="data.type == 'date'">
            <div v-if="data.options.isRange">
              <a-range-picker
                v-model:value="data.options.defaultValue"
              ></a-range-picker>
            </div>
            <div v-else>
              <a-date-picker
                :valueFormat="data.options.format"
                :format="data.options.format"
                v-model:value="data.options.defaultValue"
              ></a-date-picker>
            </div>
          </div>
          <a-slider
            v-else-if="data.type == 'slider'"
            :min="data.options.min"
            :max="data.options.max"
            :step="data.options.step"
            v-model:value="data.options.defaultValue"
          />
          <a-switch
            v-else-if="data.type == 'switch'"
            v-model:value="data.options.defaultValue"
          ></a-switch>
        </a-form-item>
        <a-form-item
          v-if="Object.keys(data.options).indexOf('required') >= 0"
          label="校验"
        >
          <a-checkbox v-model:checked="data.options.required">必填</a-checkbox>
          <a-select
            v-if="data.type === 'input'"
            v-model:value="data.options.checkType"
            style="width: 200px"
          >
            <a-select-option :value="0">无其他规则</a-select-option>
            <a-select-option :value="1">手机号码</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item
          v-if="
            Object.keys(data.options).indexOf('disabled') >= 0 ||
            Object.keys(data.options).indexOf('readonly') >= 0
          "
          label="属性"
        >
          <a-checkbox
            v-if="Object.keys(data.options).indexOf('disabled') >= 0"
            v-model:checked="data.options.disabled"
          >
            禁用
          </a-checkbox>

          <a-checkbox
            v-if="Object.keys(data.options).indexOf('readonly') >= 0"
            v-model:checked="data.options.readonly"
          >
            只读
          </a-checkbox>
        </a-form-item>

        <a-form-item
          label="宽度"
          v-if="Object.keys(data.options).indexOf('width') >= 0"
        >
          <a-slider v-model:value="data.options.width" />
        </a-form-item>
        <a-form-item
          class="mb-1"
          label="最小值"
          v-if="Object.keys(data.options).indexOf('min') >= 0"
        >
          <a-input-number
            v-model:value="data.options.min"
            :min="0"
            :max="100"
            :step="1"
          ></a-input-number>
        </a-form-item>
        <a-form-item
          class="mb-1"
          label="最大值"
          v-if="Object.keys(data.options).indexOf('max') >= 0"
        >
          <a-input-number
            v-model:value="data.options.max"
            :min="0"
            :max="100"
            :step="1"
          ></a-input-number>
        </a-form-item>
        <a-form-item
          class="mb-1"
          label="步进值"
          v-if="Object.keys(data.options).indexOf('step') >= 0"
        >
          <a-input-number
            v-model:value="data.options.step"
            :min="0"
            :max="100"
            :step="1"
          ></a-input-number>
        </a-form-item>
        <a-form-item
          label="高度"
          v-if="Object.keys(data.options).indexOf('height') >= 0"
          v-show="data.options.type == 'textarea'"
        >
          <a-slider v-model:value="data.options.height" :min="5" :max="12" />
        </a-form-item>
        <!-- 下拉框配置 -->
        <div
          v-if="
            data.type == 'radio' ||
            data.type == 'select' ||
            data.type == 'checkbox'
          "
        >
          <a-form-item
            label="数据来源"
            class="mb-1"
            v-if="Object.keys(data.options).indexOf('options') >= 0"
          >
            <div>
              <a-radio-group v-model:value="data.options.remote">
                <a-radio-button :value="false">静态数据</a-radio-button>
                <a-radio-button :value="true">远端数据</a-radio-button>
              </a-radio-group>
            </div>

            <template v-if="data.options.remote">
              <div class="mt-1">
                <a-tabs default-active-key="1" size="small">
                  <a-tab-pane key="1" tab="数据字典">
                    <a-select
                      placeholder="请选择"
                      v-model:value="data.options.remoteFunc"
                      style=""
                    >
                      <a-select-option
                        v-for="item in dictData"
                        :key="item.id"
                        :value="item.id"
                      >
                        {{ item.name }}
                      </a-select-option>
                    </a-select>

                    <a-alert
                      class="mt-1"
                      message="请选择数据字典"
                      description="字段讲广东省佛IU士大科技国好考虑会计师的很反感."
                      type="info"
                      show-icon
                    />
                  </a-tab-pane>
                  <a-tab-pane key="2" tab="sql语句" force-render>
                    <a-textarea placeholder="请输入sql语句"></a-textarea>
                    <a-alert
                      class="mt-1"
                      message="请输入sql语句"
                      description="字段讲广东省佛IU士大科技国好考虑会计师的很反感."
                      type="info"
                      show-icon
                    />
                  </a-tab-pane>
                </a-tabs>
              </div>
            </template>
            <template v-else>
              <div v-if="Object.keys(data.options).indexOf('showLabel') >= 0">
                <a-switch v-model:checked="data.options.showLabel"></a-switch>
                是否显示标签
              </div>
              <template v-if="data.type === 'radio' || data.type === 'select'">
                <a-radio-group v-model:value="data.options.defaultValue">
                  <draggable
                    :list="data.options.options"
                    v-bind="{
                      group: { name: 'options' },
                      ghostClass: 'ghost',
                      handle: '.drag-item',
                    }"
                    itemKey="value"
                  >
                    <template #item="{ element, index }">
                      <li class="mt-1">
                        <a-radio
                          :value="element.value"
                          style="margin-right: 5px"
                        >
                          <a-input
                            :style="{
                              width: data.options.showLabel ? '90px' : '120px',
                            }"
                            size="small"
                            v-model:value="element.value"
                          ></a-input>
                          <a-input
                            style="width: 90px"
                            size="small"
                            v-if="data.options.showLabel"
                            v-model:value="element.label"
                          ></a-input>
                        </a-radio>

                        <a-button
                          @click="handleOptionsRemove(index)"
                          circle
                          plain
                          size="small"
                        >
                          <template #icon><MinusOutlined /></template>
                        </a-button>
                        <i class="drag-item optionsClass ml-1">
                          <a-button circle plain size="small">
                            <template #icon><UnorderedListOutlined /></template>
                          </a-button>
                        </i>
                      </li>
                    </template>
                  </draggable>
                </a-radio-group>
              </template>

              <template v-else-if="data.type == 'checkbox'">
                <a-checkbox-group v-model:value="data.options.defaultValue">
                  <draggable
                    :list="data.options.options"
                    v-bind="{
                      animation: 200,
                      group: { name: 'options' },
                      ghostClass: 'ghost',
                      handle: '.drag-item',
                    }"
                    itemKey="value"
                  >
                    <template #item="{ element, index }">
                      <li style="margin-top: 10px">
                        <a-checkbox :value="element.value">
                          <a-input
                            :style="{
                              width: data.options.showLabel ? '90px' : '120px',
                            }"
                            size="small"
                            v-model:value="element.value"
                          ></a-input>
                          <a-input
                            style="width: 90px"
                            size="small"
                            v-if="data.options.showLabel"
                            v-model:value="element.label"
                          ></a-input>
                        </a-checkbox>
                        <a-button
                          @click="handleOptionsRemove(index)"
                          circle
                          plain
                          size="small"
                        >
                          <template #icon><MinusOutlined /></template>
                        </a-button>
                        <i class="drag-item optionsClass ml-1">
                          <a-button circle plain size="small">
                            <template #icon><UnorderedListOutlined /></template>
                          </a-button>
                        </i>
                      </li>
                    </template>
                  </draggable>
                </a-checkbox-group>
              </template>
              <div style="margin-left: 22px; margin-top: 10px">
                <a-button @click="handleAddOption">添加选项</a-button>
              </div>
            </template>
          </a-form-item>

          <a-form-item
            class="mb-1"
            label="布局"
            v-if="Object.keys(data.options).indexOf('inline') >= 0"
          >
            <a-radio-group v-model:value="data.options.inline">
              <a-radio-button :value="false">块级</a-radio-button>
              <a-radio-button :value="true">行内</a-radio-button>
            </a-radio-group>
          </a-form-item>
        </div>

        <!-- 日期配置 -->
        <div v-if="data.type == 'date'">
          <a-form-item label="是否为范围选择">
            <a-switch
              @change="dataSwitchChange"
              v-model:checked="data.options.isRange"
            ></a-switch>
          </a-form-item>

          <a-form-item label="日期格式">
            <a-select v-model:value="data.options.format">
              <a-select-option value="YYYY-MM-DD">YYYY-MM-DD</a-select-option>
              <a-select-option value="YYYY-MM-DD HH:mm">
                YYYY-MM-DD HH:mm
              </a-select-option>
            </a-select>
          </a-form-item>

          <div v-if="!data.options.isRange">
            <a-form-item label="占位内容">
              <a-input v-model:value="data.options.placeholder"></a-input>
            </a-form-item>
            <a-form-item label="可选范围">
              <div>
                <a-range-picker
                  v-model:value="data.options.disabledDate"
                ></a-range-picker>
              </div>
              <div class="mt-1">
                <a-radio-group v-model:value="data.options.disabledDateType">
                  <a-radio value="1">今天以前</a-radio>
                  <a-radio value="2">今天以后</a-radio>
                </a-radio-group>
                <span class="">
                  <CloseOutlined
                    @click="data.options.disabledDateType = undefined"
                  />
                </span>
              </div>
            </a-form-item>
          </div>
          <div v-else>
            <a-form-item label="开始时间占位内容">
              <a-input v-model:value="data.options.startPlaceholder"></a-input>
            </a-form-item>
            <a-form-item label="结束时间占位内容">
              <a-input v-model:value="data.options.endPlaceholder"></a-input>
            </a-form-item>
          </div>
        </div>

        <!-- 滑块 -->
        <div v-if="data.type == 'slider'"></div>

        <!-- 文件上传 -->
        <div v-if="data.type == 'imgupload'">
          <a-form-item>
            <div>
              <span style="color: rgba(0, 0, 0, 0.85)" class="mr-1">
                最大上传数
              </span>
              <a-input-number
                v-model:value="data.options.length"
                :min="0"
                :max="8"
                :step="1"
              ></a-input-number>
            </div>
          </a-form-item>
          <a-form-item label="上传类型">
            <a-select v-model:value="data.options.type">
              <a-select-option value="img">图片上传</a-select-option>
              <a-select-option value="file">文件上传</a-select-option>
            </a-select>
          </a-form-item>
        </div>

        <!-- 评分 -->
        <a-form-item
          label="是否允许半选"
          v-if="Object.keys(data.options).indexOf('allowHalf') >= 0"
        >
          <a-switch v-model:checked="data.options.allowHalf"></a-switch>
        </a-form-item>
        <!-- 栅格布局 -->
        <template v-if="data.type == 'grid'">
          <a-form-item class="mb-1" label="栅格间隔">
            <a-input-number
              v-model:value="data.options.gutter"
            ></a-input-number>
          </a-form-item>
          <a-form-item class="" label="列设置">
            <draggable
              :list="data.columns"
              v-bind="{
                animation: 200,
                group: { name: 'options' },
                ghostClass: 'ghost',
                handle: '.drag-item',
              }"
              handle=".drag-item"
              itemKey="index"
            >
              <template #item="{ element, index }">
                <li class="mb-1" :key="index">
                  <i
                    class="drag-item"
                    style="font-size: 16px; margin: 0 5px; cursor: move"
                  >
                    <a-button circle plain size="small">
                      <template #icon><UnorderedListOutlined /></template>
                    </a-button>
                  </i>
                  <a-input-number
                    placeholder="列宽"
                    size="small"
                    style="width: 70px"
                    :max="24"
                    :min="0"
                    v-model:value="element.span"
                  ></a-input-number>
                  <a-input-number
                    placeholder="偏移"
                    size="small"
                    style="width: 70px"
                    :max="24"
                    :min="0"
                    v-model:value="element.offset"
                  ></a-input-number>
                  <a-button
                    @click="handleOptionsRemove(index)"
                    circle
                    plain
                    size="small"
                    style="margin-left: 5px"
                  >
                    <template #icon><MinusOutlined /></template>
                  </a-button>
                </li>
              </template>
            </draggable>
            <div style="margin-left: 26px">
              <a-button @click="handleAddColumn">增加一列</a-button>
            </div>
          </a-form-item>
        </template>
      </div>
    </a-form>
  </div>
</template>

<script>
  import Draggable from 'vuedraggable'
  import { GetDictByPid } from '@/api/dictionary/api'
  import { Getfileds } from '@/api/databaselink/api'
  import { TableSetting } from './ComponentSetting/index'
  import {
    MinusOutlined,
    UnorderedListOutlined,
    CloseOutlined,
  } from '@ant-design/icons-vue'

  export default {
    components: {
      Draggable,
      TableSetting,
      MinusOutlined,
      UnorderedListOutlined,
      CloseOutlined,
    },
    // eslint-disable-next-line vue/require-prop-types
    props: ['dataAfferent', 'formData'],
    data() {
      return {
        data: this.dataAfferent,
        validator: {
          type: null,
          required: null,
          pattern: null,
          range: null,
          length: null,
        },
        dictData: [],
        tableData: [],
        tableFiledData: [],
      }
    },
    computed: {
      show() {
        if (this.data && Object.keys(this.data).length > 0) {
          return true
        }
        return false
      },
    },

    created() {
      var that = this
      GetDictByPid().then((res) => {
        if (res.isSuccess) {
          that.dictData = res.content
        }
      })
      Getfileds({
        id: this.formData.linkDb,
        table: this.formData.linktable,
      }).then((res) => {
        if (res.isSuccess) {
          this.tableFiledData = res.content
        }
      })
    },
    methods: {
      dataSwitchChange() {
        this.data.options.defaultValue = null
      },
      selectFiled() {
        this.data.table = this.formData.linktable
      },
      handleOptionsRemove(index) {
        if (this.data.type === 'grid') {
          this.data.columns.splice(index, 1)
        } else {
          this.data.options.options.splice(index, 1)
        }
      },
      handleAddOption() {
        if (this.data.options.showLabel) {
          this.data.options.options.push({
            value: '新选项',
            label: '新选项',
          })
        } else {
          this.data.options.options.push({
            value: '新选项',
          })
        }
      },
      handleAddColumn() {
        this.data.columns.push({
          span: '',
          list: [],
        })
      },
      generateRule() {
        this.data.rules = []
        Object.keys(this.validator).forEach((key) => {
          if (this.validator[key]) {
            this.data.rules.push(this.validator[key])
          }
        })
      },
    },
    watch: {
      'data.options.isRange': function (val) {
        if (typeof val !== 'undefined') {
          if (val) {
            this.data.options.defaultValue = null
          } else {
            if (Object.keys(this.data.options).indexOf('defaultValue') >= 0)
              this.data.options.defaultValue = ''
          }
        }
      },
    },
  }
</script>

<style lang="less">
  .optionsClass {
    font-size: 16px;
    margin-right: 5px;
    cursor: move;
  }
  .anticon-minus {
    margin-right: 0 !important;
  }
  .anticon-unordered-list {
    margin-right: 0 !important;
  }
  .anticon-underline {
    margin-right: 0 !important;
  }
  .anticon-underline {
    margin-right: 0 !important;
  }
  .anticon-minus-circle {
    margin-right: 0 !important;
  }
</style>
